<template>
  <div>
    <div class="wrapper" v-if="$route.name === '零部件及BOM管理'">
      <div class="navList">
        <span>{{baseInfo.number || tempInfo}} {{baseInfo.version}}</span>
        <div class="dropDown">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1"> <a-icon type="user" />C类订单另存</a-menu-item>
            </a-menu>
            <a-button type="primary" class="dropOpt"> <span>操作</span> <a-icon type="down"/> </a-button>
          </a-dropdown>
        </div>
      </div>
      <div class="tabList">
        <a-spin :spinning='showTable'>
          <a-tabs :activeKey="activeKey" @change="callback">
            <a-tab-pane key="1" tab="属性">
              <no-data></no-data>
            </a-tab-pane>
            <a-tab-pane key="2" tab="结构">
              <div class="tabTwo">
                <div class="tabLeft">
                  <div class="optList">
                    <div><a-input-search :allowClear="true" placeholder="请输入搜索关键词" style="width: 224px" @search="onSearch" /></div>
                    <div class="btnList">
                      <a-button>检出</a-button>
                      <a-button>检入</a-button>
                      <a-button>显示CAD</a-button>
                      <a-button>显示文档</a-button>
                      <a-dropdown>
                        <a-menu slot="overlay" @click="handleMenuClickNav">
                          <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
                          <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
                          <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>
                        </a-menu>
                        <a-button> <span>更多</span> <a-icon type="down"/> </a-button>
                      </a-dropdown>
                    </div>
                  </div>
                  <common-table-tree
                    ref="table1"
                    v-if="searchData.length"
                    :columns="columns"
                    :tableData="searchData"
                    :selectType="'checkbox'"
                    :data-row-key="'key'"
                    :scrollX="true"
                    scrollY="calc(100vh - 500px)"
                    :isRowsSelectVisible="true"
                    :loadVisible="loadVisible"
                    isDisable='1'
                    :filterData="filterDataTable"
                    :expanded-row-keys.sync="expandedRowKeys"
                    @selectedRows="selectedRowsJG"
                    @expandClick="expandClickJG"/>
                  <common-table-tree ref="table1" v-else :columns="columns" :tableData="searchData"/>
                </div>
                <div class="tabRight">
                  <div class="navTab">
                    <a-tabs :activeKey="activeKeyRight" @change="callbackRight">
                      <a-tab-pane key="1" tab="属性">
                        <no-data></no-data>
                      </a-tab-pane>
                      <a-tab-pane key="2" tab="使用">
                        <div>
                          <common-table 
                            data-row-key="oid" 
                            scrollY="calc(100vh - 500px)" 
                            :columnWidth="60" 
                            :isRowsSelectVisible="true" 
                            :columns="tableColumns" 
                            :tableData="tableData"
                            :scrollx="false"
                            :isPagination="false" 
                            @selectedRows="selectedData"/>
                        </div>
                      </a-tab-pane>
                      <a-tab-pane key="3" tab="相关对象">
                        <no-data></no-data>
                      </a-tab-pane>
                      <div class="btnList" slot="tabBarExtraContent">
                        <a-button>插入现有</a-button>
                        <a-button>插入新建</a-button>
                        <a-button>移除</a-button>
                        <a-button>复制</a-button>
                        <a-button>粘贴</a-button>
                      </div>
                    </a-tabs>
                  </div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="相关对象">
              <no-data></no-data>
            </a-tab-pane>
            <a-tab-pane key="4" tab="更改">
              <no-data></no-data>
            </a-tab-pane>
            <a-tab-pane key="5" tab="使用情况">
              <div class="useInfo">
                <a-button>显示使用的产品</a-button>
                <a-button>显示全部</a-button>
              </div>
              <common-table
                ref="table2"
                isDisable='1'
                :columns="columnsUse"
                :tableData="columnsDataUse"
                :selectType="'checkbox'"
                data-row-key="id"
                scrollY="calc(100vh - 500px)"
                :isRowsSelectVisible="true"
                :loadVisible="loadVisible"
                :filterData="filterDataTable"
                @routerPage="expandClickList"/>
              <!-- <common-table-tree :columns="columnsUse" :columnsData="columnsDataUse"/> -->
            </a-tab-pane>
            <a-tab-pane key="6" tab="历史记录">
              <no-data></no-data>
            </a-tab-pane>
            <a-tab-pane key="7" tab="流程记录">
              <no-data></no-data>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </div>
    </div>
    <router-view  v-if="$route.name !== '零部件及BOM管理' && !$route.meta.keepAlive"></router-view>
    <keep-alive>
      <router-view  v-if="$route.name !== '零部件及BOM管理' && $route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- <tree-modal modalTitle="使用情况列表" :modalVisible="modalVisible" @handCancel="handCancel" :treeData="treeData"></tree-modal> -->
  </div>
</template>
<script>
import commonTable from '@/components/common/commonTable';
import commonTableTree from '@/components/common/commonTableTree';
// import { getPartDetail,getSecondSonList,getUseList,getUseTreeList } from './exception';
import noData from '@/views/exception/index.vue';
import { info,searchArr } from './dataBase'
export default {
  data(){
    return{
      showTable:false,
      activeKey:'2',
      activeKeyRight:'2',
      modalVisible:false,
      treeData:[],
      expandedKeys:[],
      baseInfo:{},
      tempInfo:'',
      columns: [
        {
          displayName: "编号",
          dataIndex: "number",
          name: "number",
          fieldType: "Input",
          dataType: "String",
          width: 80,
          scopedSlots: {
            customRender: "number"
          }
        },
        {
          displayName: '名称',
          dataIndex: 'name',
          name: 'name',
          key: 'name',
          fieldType: "Input",
          dataType: "String",
          width: 100,
          ellipsis: true,
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "name"
          }
        },
        {
          displayName: '版本',
          dataIndex:'version',
          name:'version',
          key:'version',
          width: 80,
          ellipsis: true,
          scopedSlots: { customRender: "version" }
        },
        {
          displayName: '图号',
          dataIndex:'drawingNo',
          name:'drawingNo',
          key:'drawingNo',
          width: 80,
          scopedSlots: { customRender: "drawingNo" }
        },
      ],
      columnsData:[],
      searchData:[],
      tableColumns: [
        {
          displayName: '编号',
          name: 'number',
          key: 'number',
          fieldType: 'Input',
          dataType: 'String',
          width: 140,
          scopedSlots: {
            customRender: "number"
          }
        },
        {
          displayName: '名称',
          name: 'name',
          key: 'name',
          fieldType: 'Input',
          dataType: 'String',
          width: 200,
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "name"
          },
        },
        {
          displayName: '数量',
          name: 'amount',
          key: 'amount',
          fieldType: 'Input',
          dataType: 'String',
          width: 70,
        },
        {
          displayName: '单位',
          name: 'unit',
          key: 'unit',
          fieldType: 'Input',
          dataType: 'String',
          width: 100,
        },
      ],
      tableData: [],
      select: [], // 表格选中
      columnsUse:[{
        displayName: "编号",
        dataIndex: "number",
        name: "number",
        fieldType: "Input",
        dataType: "String",
        width: 120,
        scopedSlots: {
          filterDropdown: "filterDropdown",
          filterIcon: "filterIcon",
          customRender: "name"
        }
      },{
        displayName: '名称',
        dataIndex: 'name',
        name: 'name',
        key: 'name',
        fieldType: "Input",
        dataType: "String",
        width: 180,
        ellipsis: true,
        scopedSlots: {
          filterDropdown: "filterDropdown",
          filterIcon: "filterIcon",
        }
      },{
        displayName: '版本',
        dataIndex:'version',
        name:'version',
        key:'version',
        width: 80,
        ellipsis: true,
        scopedSlots: { customRender: "version" }
      },{
        displayName: '图号',
        dataIndex:'drawingNo',
        name:'drawingNo',
        key:'drawingNo',
        width: 80,
        scopedSlots: { customRender: "drawingNo" }
      },{
        displayName: '视图',
        dataIndex:'st',
        name:'st',
        key:'st',
        width: 80,
        scopedSlots: { customRender: "st" }
      }],
      columnsDataUse:[],
      loadVisible:false,
      filterDataTable:{},
      expandedRowKeys:[],
      newNum:'',
      returnedItem:[],
    }
  },
  components: { commonTable,commonTableTree,noData },
  created(){
    window.addEventListener('setItem',()=>{
      this.newNum = sessionStorage.getItem('number')
    })
  },
  mounted(){
    this.getGroupList();
  },
  watch:{
    newNum(v1,v2){
      this.watchFunc();
    },
  },
  methods:{
    //获取结构列表
    getGroupList(){
      this.baseInfo = info;
      this.searchData = searchArr;
      return false;
      this.showTable = true;
      this.tempInfo = sessionStorage.getItem('number');
      getPartDetail({code:sessionStorage.getItem('number')}).then(res=>{
        this.showTable = false;
        if(res.data.success){
          this.columnsData = res.data.data ? (typeof res.data.data == 'string' ? JSON.parse(res.data.data) : res.data.data) : [];
          // this.columnsData = res.data.data ? res.data.data : [];
          if(this.columnsData.length){
            this.searchData = this.columnsData.map((item)=>{
              item.expanded = true;
              item.key = item.uuid;
              item.version = item.version+(item.iteration ? '.' : '')+item.iteration;
              item.children = [];
              return item;
            });
            if(this.searchData.length){
              this.expandClickJG(false,this.searchData[0])
            }
          }else{
            this.searchData = []
          }
          this.baseInfo = this.searchData[0] || {};
        }else{
          this.columnsData = [];
          this.searchData = [];
          this.$message.error(res.data.message)
        }
      }).catch(()=>{
        this.showTable = false;
      })
    },
    findSonList(arr, id){
      arr.forEach((item) => {
        if (item.ida2a2 == id) {
          this.returnedItem=item.children;
        }else if (item.children != null){
          this.findSonList(item.children, id);
        }
      })
      return this.returnedItem;
    },
    //结构列表树形结构选中
    selectedRowsJG(val){
      if(val.length>1){
        this.tableData = []
        this.$message.error('只能选择一项！')
        this.$refs.table1.selectedRowKeys = []
        return false;
      }
      if(val.length==1){
        this.returnedItem = [];
        this.tableData = this.findSonList(this.searchData,val[0].ida2a2);
        if(this.tableData && this.tableData.length){
          this.tableData = this.tableData.map(item=>{
            delete item.children;
            return item;
          })
        }
        return false;
        getSecondSonList({oid:val[0].id}).then(res=>{
          let arr = res.data.data ? (typeof res.data.data == 'string' ? JSON.parse(res.data.data) : res.data.data) : [];
          // let arr = res.data.data ? res.data.data : [];
          if(arr.length){
            arr = arr.map((item)=>{
              item.key = item.uuid;
              item.version = item.version+(item.iteration ? '.' : '')+item.iteration;
              return item;
            })
            this.tableData = arr
          }
        })
      }else{
        this.tableData = []
      }
    },
    format(arr,id,val) {
      for (var i = 0; i < arr.length; i++) {
        if(arr[i].uuid == id){
          arr[i].children = val
        }
        if (arr[i].children && arr[i].children) {
          arr[i].children = this.format(arr[i].children,id,val);
        }
      }
      return arr;
    },
    //点击结构列表展示子级
    expandClickJG(expanded,row){
      getSecondSonList({oid:row.id}).then(res=>{
        let arr = res.data.data ? (typeof res.data.data == 'string' ? JSON.parse(res.data.data) : res.data.data) : [];
        // let arr = res.data.data ? res.data.data : [];
        if(arr.length){
           arr = arr.map((item)=>{
            item.expanded = false;
            item.key = item.uuid;
            item.children = [];
            return item;
          })
          let newArr = this.deepClone(this.searchData)
          this.searchData = this.format(newArr,row.uuid,arr)
        }
      })
    },
    //结构列表使用选中
    selectedData(val) {
      console.log(466,val)
    },
    //获取使用情况列表
    getUseList(){
      return false;
      if(!this.baseInfo.masterId){
        this.columnsDataUse = [];
        return false;
      }
      this.showTable = true;
      getUseList({masterId:this.baseInfo.masterId}).then(res=>{
        this.showTable = false;
        if(res.data.success){
          this.columnsDataUse = res.data.data ? (typeof res.data.data == 'string' ? JSON.parse(res.data.data) : res.data.data) : [];
          // this.columnsDataUse = res.data.data ? res.data.data : [];
          if(this.columnsDataUse.length){
            this.columnsDataUse = this.columnsDataUse.map((item,index)=>{
              item.key = item.id;
              delete item.children;
              return item;
            });
          }
        }else{
          this.$message.error(res.data.message)
        }
      }).catch(()=>{
        this.columnsDataUse = [];
        this.showTable = false;
      })
    },
    //树结构弹框
    handCancel(){
      this.modalVisible = false;
    },
    expandClickList(val){
      this.showTable = true;
      getUseTreeList({oid:this.baseInfo.id,masterId:val.ida2a2}).then(res=>{
        this.showTable = false;
        let arr = res.data.data ? (typeof res.data.data == 'string' ? [JSON.parse(res.data.data)] : [res.data.data]) : [];
        if(arr.length){
          this.treeData = arr;
          this.modalVisible = true;
        }else{
          this.$message.error('暂无数据！')
        }
      }).catch(()=>{
        this.showTable = false;
        this.$message.error(res.data.detailMessage)
      })
    },
    handleMenuClick(e) {
      console.log('click', e.key);
      if(e.key=='1'){
        this.$router.push('/single/partsBOM/orderCList')
      }
    },
    handleMenuClickNav(e){
      console.log('click', e);
    },
    callback(key) {
      this.activeKey = key;
      if(key==5){
        this.getUseList()
      }else if(key==2){
        this.getGroupList();
      }
    },
    callbackRight(key){
      this.activeKeyRight = key;
    },
    onSearch(value) {
      if(value){
        this.searchData = [];
        this.searchData = this.columnsData.filter(item=>{
          return JSON.stringify(item).indexOf(value)!=-1;
        })
      }else{
        this.searchData = this.columnsData;
      }
    },
    watchFunc(){
      if(this.activeKey==2){
        this.getGroupList();
      }else if(this.activeKey==5){
        this.showTable = true;
        this.tempInfo = sessionStorage.getItem('number');
        getPartDetail({code:sessionStorage.getItem('number')}).then(res=>{
          this.showTable = false;
         let arr = res.data.data ? (typeof res.data.data == 'string' ? JSON.parse(res.data.data) : res.data.data) : [];
          if(res.data.success){
            this.baseInfo = arr[0] || {};
            this.getUseList()
          }else{
            this.$message.error(res.data.message)
          }
        }).catch(()=>{
          this.showTable = false;
        })
      }
    }
  }
};
</script>
<style lang="less" scoped>
  .wrapper{
    min-height: calc(100vh - 165px);
    background: #fff;
    padding: 20px;
    .navList{
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
      margin-right: 13px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .dropOpt{
        width: 80px;
        height: 32px;
        padding: 0 10px;
        border-radius: 4px;
        text-align: left;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 20px;
        span{
          display: block;
          width: 100%;
          border-right: 1px solid#5F8AE4;
        }
      }
    }
    .tabList{
      .tabTwo{
        display: flex;
        width:100%;
        .tabLeft{
          width: 100%;
          margin-right: 20px;
          overflow: hidden;
          .optList{
            display: flex;
            justify-content: space-between;
            padding: 12px 0 16px;
            .btnList{
              button{
                margin-left: 10px;
              }
            }
          }
        }
        .tabRight{
          width: 100%;
          overflow: hidden;
          .navTab{
            .btnList{
              button{
                margin-left: 10px;
              }
            }
          }
        }
      }
      .useInfo{
        display: flex;
        justify-content: flex-end;
        border-right: 1px solid #ddd;
        margin-bottom: 10px;
        button{
          margin-left: 10px;
        }
      }
    }
  }
  /deep/.ant-table-row-cell-break-word{
    overflow: hidden;
  }
  /deep/.ant-table .ant-table-row-indent + .ant-table-row-expand-icon{
    float: left;
  }
</style>